<!DOCTYPE html>
<html lang="en">
    

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="时间线, 一缕轻风">
    <meta name="description" content="时间线 | 一缕轻风">
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/animate.css/animate.min.css">
    
    <!-- 是否加载使用自带的 prismjs. -->
    <link rel="stylesheet" href="/blog/libs/prism/prism-tomorrow-night.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/prism/prism-line-numbers.css">
    
    
    <!-- Material Icons -->
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialicons/materialicons.css">
    
    <!-- Fontawesome Icons -->
    <link rel="stylesheet" type="text/css" href="/blog/libs/fontawesome/css/all.min.css">
    <!-- aos -->
    <link rel="stylesheet" type="text/css" href="/blog/libs/aos/aos.css">
    <!-- The theme css -->
    <link rel="stylesheet" type="text/css" href="/blog/css/xxcoding.css">

    
    <!-- Your css -->
    <link rel="stylesheet" type="text/css" href="/blog/css/my.css">
    
    <!-- 
        
            
                <link rel="stylesheet" type="text/css" href="/libs/fontawesome/css/all.min.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/animate.css/animate.min.css">
            
        
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/prism/prism-tomorrow-night.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/materialicons/materialicons.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/aplayer/APlayer.min.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/tocbot/tocbot.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/libs/aplayer/Meting.min.js">
            
        
            
                <link rel="stylesheet" type="text/css" href="/css/xxcoding.css">
            
        
            
                <link rel="stylesheet" type="text/css" href="/css/my.css">
            
        
     -->
    <!-- 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500">
    
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Marck+Script">
     -->
    

    <!-- Custom Head -->
    

    <title>时间线 | 一缕轻风</title>
    <link rel="icon" type="image/png" href="/blog/img/favicon.png">
    <script src="/blog/libs/jquery/jquery.min.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>

<body>
    <header class="navbar-fixed">
    <!-- <nav class="nav-extended pushpin"> -->
    <nav class="nav-color nav-transparent" id="nav-header" color-on-scroll="100">
        <div class="container">
            <div class="nav-wrapper">
                <a class="brand-logo waves-effect waves-light" href="/">
                    
                    <img src="/blog/img/logo.png" class="circle logo-img lazyload" data-src="/blog/img/logo.png" alt="logo">
                    
                    <span class="logo-span">一缕轻风</span>
                </a>
                <a href="#" data-target="nav-mobile" class="sidenav-trigger">
    <i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
    
        
            <li>
                
                
                <a class="nav-item waves-effect waves-light" href="/" style="display: flex;">
                    <i class="material-icons">home</i>
                
                    <span class="nav-menu">首页</span>
                </a>
                
            </li>
        
    
        
            <li>
                
                
                <a class="nav-item waves-effect waves-light" href="/categories" style="display: flex;">
                    <i class="material-icons">chrome_reader_mode</i>
                
                    <span class="nav-menu">Categories</span>
                </a>
                
            </li>
        
    
        
            <li>
                
                
                <a class="nav-item waves-effect waves-light" href="/tags" style="display: flex;">
                    <i class="material-icons">label</i>
                
                    <span class="nav-menu">Tags</span>
                </a>
                
            </li>
        
    
        
            <li>
                
                
                <a class="nav-item waves-effect waves-light" href="/timeline" style="display: flex;">
                    <i class="material-icons">timeline</i>
                
                    <span class="nav-menu">时间线</span>
                </a>
                
            </li>
        
    
        
            <li>
                
                
                <a class="nav-item waves-effect waves-light" href="/about" style="display: flex;">
                    <i class="material-icons">account_circle</i>
                
                    <span class="nav-menu">关于</span>
                </a>
                
            </li>
        
    
    <li>
        <a class="nav-item modal-trigger waves-effect waves-light" href="#searchModal">
            <i class="material-icons">search</i>
            <!-- <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.6;"></i> -->
        </a>
    </li>
</ul>

            </div>
        </div>
    </nav>
</header>
<div class="sidenav" id="nav-mobile">
    <div class="user-view">
        <div class="background overlay">
            <img class="lazyload" src="/blog/img/bg/bg-1.jpg" data-src="/blog/img/bg/bg-1.jpg">
        </div>
        <img class="circle responsive-img lazyload" src="/blog/img/logo.png" data-src="/blog/img/logo.png">
        <div class="name white-text">一缕轻风</div>
        <div class="description white-text"></div>
    </div>
    <ul>
        
            
                <li>
                    
                    
                    <a class="waves-effect" href="/" style="display: flex;">
                        <i class="material-icons">home</i>
                    
                        <span>首页</span>
                    </a>
                    
                </li>
            
        
            
                <li>
                    
                    
                    <a class="waves-effect" href="/categories" style="display: flex;">
                        <i class="material-icons">chrome_reader_mode</i>
                    
                        <span>Categories</span>
                    </a>
                    
                </li>
            
        
            
                <li>
                    
                    
                    <a class="waves-effect" href="/tags" style="display: flex;">
                        <i class="material-icons">label</i>
                    
                        <span>Tags</span>
                    </a>
                    
                </li>
            
        
            
                <li>
                    
                    
                    <a class="waves-effect" href="/timeline" style="display: flex;">
                        <i class="material-icons">timeline</i>
                    
                        <span>时间线</span>
                    </a>
                    
                </li>
            
        
            
                <li>
                    
                    
                    <a class="waves-effect" href="/about" style="display: flex;">
                        <i class="material-icons">account_circle</i>
                    
                        <span>关于</span>
                    </a>
                    
                </li>
            
        
    </ul>
</div>


    <style>
	.md-container {
		width: 90%;
		max-width: 1170px;
		margin: 0 auto;
	}
	.md-container::after {
		content: '';
		display: table;
		clear: both;
	}
	#md-timeline {
		position: relative;
		padding: 2em 0;
		margin-top: 2em;
		margin-bottom: 2em;
	}
	@media screen and (max-device-width:480px){
		#md-timeline {
			margin-top: 6em;
		}
	}
	#md-timeline::before {
		content: '';
		position: absolute;
		top: 0;
		left: 18px;
		height: 100%;
		width: 2px;
		background: #d7e4ed;
	}
	.md-timeline-title {
		font-size: 20px;
		line-height: 24px;
	}
	.md-timeline-content a {
		text-decoration: none;
	}
	.md-timeline-info {
		height: 20px;
		width: 100%;
		margin: 10px 0px;
	}
	.md-timeline-info-span {
		float: right;
		margin-right: 10px;
		text-align: right;
	}
	.md-timeline-excerpt {
	    	clear: right; 
	}
	@media only screen and (min-width: 1170px) {
		#md-timeline {
			margin-top: 3em;
			margin-bottom: 3em;
		}
		#md-timeline::before {
			left: 50%;
			margin-left: -2px;
		}
	}
	.md-timeline-block {
		position: relative;
		margin: 2em 0;
	}
	.md-timeline-block:after {
		content: "";
		display: table;
		clear: both;
	}
	.md-timeline-block:first-child {
		margin-top: 0;
	}
	.md-timeline-block:last-child {
		margin-bottom: 0;
	}
	@media only screen and (min-width: 1170px) {
		.md-timeline-block {
			margin: 4em 0;
		}
		.md-timeline-block:first-child {
			margin-top: 0;
		}
		.md-timeline-block:last-child {
			margin-bottom: 0;
		}
	}
	.md-timeline-date {
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 40px;
		border-radius: box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
	}
	.md-timeline-date.blue {
		background: #0D395F;
		-webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
	}
	@media only screen and (min-width: 1170px) {
		.md-timeline-date {
			width: 60px;
			height: 60px;
			left: 50%;
			margin-left: -30px;
			/* Force Hardware Acceleration in WebKit */
			-webkit-transform: translateZ(0);
			-webkit-backface-visibility: hidden;
		}
		.cssanimations .md-timeline-date.is-hidden {
			visibility: hidden;
		}
		.cssanimations .md-timeline-date.bounce-in {
			visibility: visible;
			-webkit-animation: md-bounce-1 0.6s;
			-moz-animation: md-bounce-1 0.6s;
			animation: md-bounce-1 0.6s;
		}
	}
	@-webkit-keyframes md-bounce-1 {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(1.2);
		}
		100% {
			-webkit-transform: scale(1);
		}
	}
	@-moz-keyframes md-bounce-1 {
		0% {
			opacity: 0;
			-moz-transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-moz-transform: scale(1.2);
		}
		100% {
			-moz-transform: scale(1);
		}
	}
	@keyframes md-bounce-1 {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.5);
			-moz-transform: scale(0.5);
			-ms-transform: scale(0.5);
			-o-transform: scale(0.5);
			transform: scale(0.5);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-ms-transform: scale(1.2);
			-o-transform: scale(1.2);
			transform: scale(1.2);
		}
		100% {
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
	}
	.md-timeline-content {
		position: relative;
		margin-left: 60px;
		background: white;
		padding: 1em;
		-webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
	}
	.md-timeline-content:after {
		content: "";
		display: table;
		clear: both;
	}
	.md-timeline-content h2 {
		color: #303e49;
	}
	.md-timeline-content p, .md-timeline-content .md-read-more, .md-timeline-content .md-date {
		font-size: 13px;
		font-size: 0.8125rem;
	}
	.md-timeline-content .md-read-more, .md-timeline-content .md-date {
		display: inline-block;
	}
	.md-timeline-content p {
		margin: 1em 0;
		line-height: 1.6;
	}
	.md-timeline-content .md-read-more {
		float: right;
		padding: .8em 1em;
		background: #acb7c0;
		color: white;
		border-radius: 0.25em;
	}
	.md-date {
		color: white;
		text-align: center;
	}
	.no-touch .md-timeline-content .md-read-more:hover {
		background-color: #bac4cb;
	}
	.md-timeline-content::before {
		content: '';
		position: absolute;
		top: 16px;
		right: 100%;
		height: 0;
		width: 0;
		border: 7px solid transparent;
		border-right: 7px solid white;
	}
	@media only screen and (min-width: 768px) {
		.md-timeline-content h2 {
			font-size: 20px;
			font-size: 1.25rem;
		}
		.md-timeline-content p {
			font-size: 16px;
			font-size: 1rem;
		}
		.md-timeline-content .md-read-more {
			font-size: 14px;
			font-size: 0.875rem;
		}
	}
	@media only screen and (min-width: 1170px) {
		.md-date {
			text-align: center;
			margin-top: 10px;
			line-height: 20px;
		}
		.md-timeline-content {
			margin-left: 0;
			padding: 1.6em;
			width: 45%;
		}
		.md-timeline-content::before {
			top: 24px;
			left: 100%;
			border-color: transparent;
			border-left-color: white;
		}
		.md-timeline-content .md-read-more {
			float: left;
		}
		.md-timeline-block:nth-child(even) .md-timeline-content {
			float: right;
		}
		.md-timeline-block:nth-child(even) .md-timeline-content::before {
			top: 24px;
			left: auto;
			right: 100%;
			border-color: transparent;
			border-right-color: white;
		}
		.md-timeline-block:nth-child(even) .md-timeline-content .md-read-more {
			float: right;
		}
		.cssanimations .md-timeline-content.is-hidden {
			visibility: hidden;
		}
		.cssanimations .md-timeline-content.bounce-in {
			visibility: visible;
			-webkit-animation: md-bounce-2 0.6s;
			-moz-animation: md-bounce-2 0.6s;
			animation: md-bounce-2 0.6s;
		}
	}
	@media only screen and (min-width: 1170px) {
		/* inverse bounce effect on even content blocks */
		.cssanimations .md-timeline-block:nth-child(even) .md-timeline-content.bounce-in {
			-webkit-animation: md-bounce-2-inverse 0.6s;
			-moz-animation: md-bounce-2-inverse 0.6s;
			animation: md-bounce-2-inverse 0.6s;
		}
	}
	@-webkit-keyframes md-bounce-2 {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(20px);
		}
		100% {
			-webkit-transform: translateX(0);
		}
	}
	@-moz-keyframes md-bounce-2 {
		0% {
			opacity: 0;
			-moz-transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-moz-transform: translateX(20px);
		}
		100% {
			-moz-transform: translateX(0);
		}
	}
	@keyframes md-bounce-2 {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-100px);
			-moz-transform: translateX(-100px);
			-ms-transform: translateX(-100px);
			-o-transform: translateX(-100px);
			transform: translateX(-100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-ms-transform: translateX(20px);
			-o-transform: translateX(20px);
			transform: translateX(20px);
		}
		100% {
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
	}
	@-webkit-keyframes md-bounce-2-inverse {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(-20px);
		}
		100% {
			-webkit-transform: translateX(0);
		}
	}
	@-moz-keyframes md-bounce-2-inverse {
		0% {
			opacity: 0;
			-moz-transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-moz-transform: translateX(-20px);
		}
		100% {
			-moz-transform: translateX(0);
		}
	}
	@keyframes md-bounce-2-inverse {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100px);
			-moz-transform: translateX(100px);
			-ms-transform: translateX(100px);
			-o-transform: translateX(100px);
			transform: translateX(100px);
		}
		60% {
			opacity: 1;
			-webkit-transform: translateX(-20px);
			-moz-transform: translateX(-20px);
			-ms-transform: translateX(-20px);
			-o-transform: translateX(-20px);
			transform: translateX(-20px);
		}
		100% {
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
			-ms-transform: translateX(0);
			-o-transform: translateX(0);
			transform: translateX(0);
		}
	}
</style>
<main>
    <div style="height: 400px; position: relative; top: -64px; left: 0;">
        <div class="cover-background">
    <div class="pattern lazyload" data-src="/blog/img/icon-seamless.png"
        style="background-image: url('/blog/img/icon-seamless.png');">

    </div>
</div>
<div class="center" id="bg-center">
    <h2 class="title white-text">一缕轻风</h2>
    
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Marck+Script">

<div class="description white-text">
    
    <span id="subtitle" style="font-family: 'Marck Script';"></span>
    
</div>
<script src="/blog/libs/typedjs/typed.js"></script>
<script>

    var typed = new Typed("#subtitle", {
        strings: [ 
            
                "今晚月色真美,风也温柔!!!",
            
                "Welcome. I&#39;m ice-matcha!!!",
            
        ],
        startDelay: 300,
        typeSpeed: 100,
        loop: true,
        backSpeed: 50,
        showCursor: true
    });

</script>

</div>
    </div>
    <section id="md-timeline" class="md-container">
                    
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Apr 28 2022</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2022/04/28/undefined/">RabbitMQ交换器类型与死信队列</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/RabbitMQ/">RabbitMQ</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/RabbitMQ/" rel="tag">RabbitMQ</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             
                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Apr 27 2022</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2022/04/27/undefined/">Centos 7安装RabbitMQ</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/RabbitMQ/">RabbitMQ</a>, <a class="category-link" href="/blog/categories/RabbitMQ/Linux/">Linux</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/Linux/" rel="tag">Linux</a>, <a class="tag-none-link" href="/blog/tags/RabbitMQ/" rel="tag">RabbitMQ</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             
                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Mar 23 2022</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2022/03/23/undefined/">关于 mysql 5.7 默认开启的新特性 sql_mode=only_full_group_by 的一些问题</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/MySQL/">MySQL</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/MySQL/" rel="tag">MySQL</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             开始之前的一些坑
原本笔者所使用的MySQL数据库是5.6版本的，由于新项目的开发，需要使用相对较新的技术，伴随着就是较新的软件，所以接触到...
                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Mar 21 2022</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2022/03/21/undefined/">MySQL的问题与笔记</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/MySQL/">MySQL</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/MySQL/" rel="tag">MySQL</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             
                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Mar 13 2022</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2022/03/13/undefined/">MySQL 之 EXPLAIN的列解析</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/MySQL/">MySQL</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/MySQL/" rel="tag">MySQL</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             EXPLAIN是Mysql里的SQL语句优化分析的重要语句，使用它可以帮助我们选择更好的索引或者更优化的SQL查询语句，以下就是对使用EXPLAIN下各列的解析:

                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Apr 26 2021</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2021/04/26/undefined/">Linux问题故障定位工具介绍</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/Linux/">Linux</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/Linux/" rel="tag">Linux</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             前言有时候会遇到服务器故障一些疑难杂症，并且监控插件并不能...
                         ...
                     </p>
                             </div>
             </div>	
            
             <div class="md-timeline-block">
                         <div class="md-timeline-date blue">
                                <div class="md-date">Feb 20 2021</div>
                         </div>
 
                         <div class="md-timeline-content">
                                 <div class="md-timeline-title"><a href="/blog/2021/02/20/undefined/">函数式编程范式</a></div>
                     <div class="md-timeline-info">
                         <span class="md-timeline-info-span">Categories:
                             <a class="category-link" href="/blog/categories/JavaScript/">JavaScript</a>
                         </span>
                         <span class="md-timeline-info-span">Tags:
                             <a class="tag-none-link" href="/blog/tags/JavaScript/" rel="tag">JavaScript</a>
                         </span>
                         
                     </div>
                     <p class="md-timeline-excerpt">
                         
                             为什么要学习函数式编...
                         ...
                     </p>
                             </div>
             </div>	
            	   	  		
            </section>
</main>
<script>
    $(function() {
        if( ($('#bottom').offset().top + $('#bottom').outerHeight() ) < $(window).height() ) {
            var footerBottom = $(window).height() - $('#bottom').outerHeight() - $('#bottom').offset().top;
            $('#bottom').css('bottom', '-' + footerBottom + 'px');
        }
    });
</script>

    <footer class="page-footer footer-color">
    
        
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">


<style type="text/css">
    .aplayer.aplayer-fixed {
        z-index: 999;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    

    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #b7daff;
    }
</style>

<div class="">
    <div class="row">
        <meting-js
            class="col l8 offset-l2 m10 offset-m1 s12"
            server="netease"
            type="playlist"
            id="743950282"
            fixed='true'
            autoplay='false'
            theme='#b7daff'
            loop='all'
            order='random'
            preload='auto'
            volume='0.7'
            list-folded='true'>
        </meting-js>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>


    
    <div class="container">
        <div class="row center">
            <div class="col l12 m12 s12">
                <div id="framework-info">
                    Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
                    &nbsp;
                </div>
                <div id="siteinfo">
                    <!-- <span>站点总字数：</span> -->
                    
                </div>
                
                <div id="sitetime">载入运行时间...</div>
                <script>
                    function siteTime() {
                        var seconds = 1000;
                        var minutes = seconds * 60;
                        var hours = minutes * 60;
                        var days = hours * 24;
                        var years = days * 365;
                        var today = new Date();
                        var startYear = "2021";
                        var startMonth = "2";
                        var startDate = "19";
                        var startHour = "0";
                        var startMinute = "0";
                        var startSecond = "0";
                        var todayYear = today.getFullYear();
                        var todayMonth = today.getMonth() + 1;
                        var todayDate = today.getDate();
                        var todayHour = today.getHours();
                        var todayMinute = today.getMinutes();
                        var todaySecond = today.getSeconds();
                        var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                        var diff = t2 - t1;
                        var diffYears = Math.floor(diff / years);
                        var diffDays = Math.floor((diff / days) - diffYears * 365);
                        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                            minutes);
                        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                            diffMinutes * minutes) / seconds);
                        if (startYear == todayYear) {
                            document.getElementById("year").innerHTML = todayYear;
                            document.getElementById("sitetime").innerHTML = "本站已持续运行 " + "<span class='white-text'>" + diffDays + "</span>" + " 天 "
                            + "<span class='white-text'>" + diffHours + "</span>" + " 小时 "
                            + "<span class='white-text'>" + diffMinutes + "</span>" + " 分钟 "
                            + "<span class='white-text'>" + diffSeconds + "</span>" + " 秒";
                        } else {
                            document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                            document.getElementById("sitetime").innerHTML = "本站已持续运行 " + "<span class='white-text'>" + diffYears + "</span>" + " 年 "
                            + "<span class='white-text'>" + diffDays + "</span>" + " 天 "
                            + "<span class='white-text'>" + diffHours + "</span>" + " 小时 "
                            + "<span class='white-text'>" + diffMinutes + "</span>" + " 分钟 "
                            + "<span class='white-text'>" + diffSeconds + "</span>" + " 秒";
                        }
                    }
                    setInterval(siteTime, 1000);
                </script>
                
                
                
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container center">
            Copyright&nbsp;&copy;
            
                <span id="year">2021 - 2022</span>
            
            ,&nbsp;
            made with <span style="color: red;">❤️</span>&nbsp;&nbsp;by
            <a href="/blog/about" target="_blank">ice-matcha</a>
            for a better web.
        </div>
    </div>
</footer>


    
    <!-- 回到顶部按钮 -->
<div id="back-top" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

    

    <script src="/blog/libs/materialize/materialize.min.js"></script>
<script src="/blog/libs/lazyload/lazyload.min.js"></script>
<script src="/blog/libs/aos/aos.js"></script>
<script src="/blog/js/xxcoding.js"></script>


<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>


</body>
</html>
